<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分类谜题: 多彩水瓶分类益智游戏</title>
    <link href="remote_files/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./dark.css">
    <style>
      html,body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      body {
        --color-light-fff: #fff;
        --color-light-black: black;
        --color-light-black-trans: rgba(0,0,0,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .toast {
        text-align: center;
        width: auto;
        min-width: 100px;
        background: var(--color-light-black-trans);
        color: var(--color-light-fff);
      }
      .btn-wrap {
        margin-bottom: 20px;
      }
      .tube-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 15px;
      }
      .tube {
        width: 30px;
        margin-left: 10px;
        margin-right: 10px;
        height: fit-content;
      }
      .tube-active {
        transform: translateY(-10px);
      }
      .tube__layer {
        border: 1px solid var(--color-light-black);
        width: 100%;
        height: 35px;
      }
      .tube__layer:last-child {
        border-radius: 0 0 5px 5px;
      }
      .tube__layer:first-child {
        border-radius: 5px 5px 0 0;
      }
      .row{
        text-align: center;
      }
      .hstack {
        justify-content: center;
      }
      /* 弹出消息样式 */
      .firfe_toast {
        position: fixed;
        top: 10px;
        right: 10px;
        background-color: #333;
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 14px;
        font-family: Arial, sans-serif;
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.5s ease-out;
        border: #ffffff 1px solid;
      }
  
      /* 消失时的透明效果 */
      .firfe_toast.hide {
        opacity: 0;
      }
      #firfe-add {
        text-align: center;
        padding-top: 10px;
      }
      #firfe-add a {
        text-decoration: none;
        color: rgb(204, 204, 204);
        padding: 0px 8px;
      }
    </style>
    <script src="remote_files/vue.global.prod.js"></script>
  </head>
  <body class="dark">
    <div class="container">
      <!-- <button class="btn btn-outline-secondary fixed" onClick=""></button> -->
      <div class="row">
        <h1>SortPuz 分类谜题</h1>
        <h2>多彩水瓶分类益智游戏</h2>
        <p>把相同颜色的饮料都倒到同一个杯子里吧！</p>
        <br/>
      </div>
      <div id="app" class="row">
        <div class="col hstack gap-2">
          <label for="level-selector">选择关卡</label>
          <select id="level-selector" class="btn btn-outline-secondary" v-model="currConfigIdx">
            <option :value="i-1" v-for="i in configsLen">{{i}}</option>
          </select>
        </div>
        
        <div class="hstack gap-2 mt-2">
          <h2 class="m-0">第{{ currConfigIdx + 1 }}关</h2>
          <button class="btn btn-outline-secondary" style="margin-left: 10px" @click="handleClickLastBtn" :disabled="!currConfigIdx">上一关</button>
          <button class="btn btn-outline-secondary" @click="handleClickNextBtn">下一关</button>
          <button class="btn btn-outline-danger" @click="handleClickResetBtn">重玩本关</button>
        </div>
        <div class="tube-wrap">
          <div v-for="(arr, idx) in state" style="margin-bottom: 20px">
            <div
              class="tube"
              :class="idx===activeTube ? 'tube-active' : ''"
              @click="handleClickTube(idx)"
            >
              <div
                class="tube__layer"
                v-for="i in nLayers"
                :style="`background: ${getColor(arr, 4-i)}`"
              ></div>
            </div>
            <div>{{idx}}</div>
          </div>
        </div>
        <div class="hstack gap-2 mb-2">
          <button class="btn btn-outline-secondary" @click="handleClickUndoBtn" :disabled="getHistoryLength()<=0">撤销</button>
          <button class="btn btn-outline-secondary" @click="handleClickRedoBtn" :disabled="!getCanRedo()">重做</button>
          <button class="btn btn-outline-secondary" @click="handleClickSolveBtn">解答</button>
          <button class="btn btn-outline-secondary" @click="handleClickPlayBtn">播放解答动画</button>
        </div>
        <!-- <div class="mb-2 hstack gap-2">
          <button class="btn btn-outline-secondary" @click="nTubes--" :disabled="nTubes <= 0">减少空杯子</button>
          <button class="btn btn-outline-secondary" @click="nTubes++">增加空杯子</button>
        </div> -->
        <div>
          <div>步数：{{ getHistoryLength() }}</div>
          <div>历史步骤：</div>
          <div style="white-space: pre; border: 1px solid #ccc;
                      overflow-y: auto; height: 200px;">
            {{ getHistoryText() }}
          </div>
        </div>
        <div id="firfe-add">
          <a href="https://github.com/yqianjiang/sort-puz" target="_blank">原项目仓库</a>
          <a href="https://github.com/Firfr/sort-puz_zh" target="_blank">镜像制作仓库</a>
        </div>
        <div class="toast-container position-fixed top-50 start-50 translate-middle">
          <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" :style="msg ? 'display:block':''">
            <div class="toast-body">
              {{msg}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const color_zh = {
        red6:"珊瑚红",   yellow2:"浅柠黄", green3:"薄荷绿",
        cyan3:"天青蓝",  blue7:"电光蓝",   purple7:"薰衣草紫",
        gray5:"浅灰",    pink2:"浅粉红",   pink6:"玫瑰红",
        orange5:"橘橙",  yellow9:"棕黄",   green7:"深翠绿",
        blueGray8:"灰蓝",blue10:"深藏蓝",  pink9:"酒红",
        gray9:"深灰", 
      };
    </script>
    <script src="configs.js"></script>
    <script src="waterTube.js"></script>
    <script src="main.js"></script>
    <script>
    // 创建弹出消息
      function firfe_showToast(message, duration = 3000) {
        const toast = document.createElement('div');
        toast.className = 'firfe_toast';
        toast.textContent = message;
  
        document.body.appendChild(toast);
  
        // 3秒后开始淡出
        setTimeout(() => {
          toast.classList.add('hide');
  
          // 完全消失后从 DOM 移除
          setTimeout(() => {
            document.body.removeChild(toast);
          }, 500); // 与 CSS transition 时间匹配
        }, duration);
      }
    </script>
  </body>
</html>
